<template>
  <layout :config="navConfig">
    <template #default>
      <div class="m-service_box">

        <div class="answer-box">
          <div
            v-for="($item,$index) in listData"
            :class="['answer-item',{active: $item.isActive}]"
            :key="$item.title"
          >
            <div class="title-info" @click="$item.isActive = !$item.isActive">
              <em>{{$index+1}}</em>
              <span>{{$item.title}}</span>
              <i class="iconfont icon-arrow-right-s-line"></i>
            </div>
            <div class="anwser-content" v-html="$item.answer" v-show="$item.isActive"></div>
          </div>
        </div>
      </div>
    </template>
  </layout>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { INavigation } from "@/types";

@Component({
  name: "Service"
})
export default class extends Vue {
  navConfig: INavigation = {
    text: "项目说明"
  };

  listData = [
    {
      title: "5050是一家什么平台",
      answer: "是狐狸送快递放假看沙拉酱豆腐拉开始的减肥拉开始的减肥离开",
      isActive: false
    },
    {
      title: "如何成为我们的会员",
      answer:
        "sldfjlskdfjl收快递费老师肯定积分了是代付款类似的纠纷拉克丝京东方是独立开发",
      isActive: false
    },
    {
      title: "是否支持手机号码验证",
      answer: "支持",
      isActive: false
    }
  ];
}
</script>

<style lang="scss">
@import "../assets/styles/service.scss";
</style>

